import React, { useEffect } from 'react'
import { Button, Checkbox, Form, Input, Card, message } from 'antd'
// useNavigate用来实现编程式导航
// useLocation可以获取传递过来的state数据
import { useNavigate, useLocation } from 'react-router-dom'

import {
  reqAddHospitalSet,
  reqGetHospitalSet,
  reqUpdateHospitalSet,
} from '@api/hospital/hospitalSet'
import { IhospitalSetParams } from '@api/hospital/hospitalSet/model/hospitalSetTypes'
export default function HospitalSetAddOrUpdate() {
  const navigate = useNavigate()
  // 获取传递过来的医院设置id. 通过state传递,重命名为id
  const location = useLocation()
  const id: string = location.state as string

  // 创建form实例
  const [form] = Form.useForm()

  // 当组件挂载的时候发送请求,获取指定的一条医院设置数据
  useEffect(() => {
    // 如果是修改才发送请求,如果是添加则不发送请求
    // 如果是修改,id一定有值,如果是添加id是undefined
    async function fetch() {
      if (id) {
        const result = await reqGetHospitalSet(id)
        // 将数据,添加到表单中
        form.setFieldsValue(result)
      }
    }
    fetch()
  }, [])

  // 点击保存按钮的事件处理函数
  const onFinish = async (values: IhospitalSetParams) => {
    // 由于添加和修改是同一个组件, 所以这里要判断到底是添加的保存还是修改的保存
    // 判断条件: id是否有值. 有值就是修改,没有值就是添加
    if (id) {
      values.id = id
      await reqUpdateHospitalSet(values)
      message.success('医院设置修改成功')
    } else {
      // console.log('Success:', values)
      await reqAddHospitalSet(values)
      // 提示用户
      message.success('医院设置添加成功')
    }
    // 回到医院设置界面
    navigate(`/syt/hospital/hospitalSet`)
  }

  return (
    <Card>
      <Form
        labelCol={{ span: 3 }}
        wrapperCol={{ span: 21 }}
        onFinish={onFinish}
        form={form}
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{ required: true, message: '请添写医院名称' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{ required: true, message: '请添写医院编号' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{ required: true, message: '请添写api基础路径' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人名称"
          name="contactsName"
          rules={[{ required: true, message: '请添写联系人名称' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人手机号"
          name="contactsPhone"
          rules={[
            {
              required: true,
              message: '请输入正确的手机格式',
              pattern: /^1[3-9]\d{9}$/,
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 3, span: 16 }}>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
          <Button
            type="default"
            style={{ marginLeft: 10 }}
            onClick={() => {
              navigate(-1)
            }}
          >
            返回
          </Button>
        </Form.Item>
      </Form>
    </Card>
  )
}
/*
问题: 修改页面没有展示当前数据信息

实现需求的思路: 
1. 发送请求获取数据
2. 将拿到的数据添加到form表单中
  2.1 创建form
  2.2 绑定form
  2.3 调用方法

*/
